
; (function () {

  const init = () => {
    bindEvent();
  }

  function bindEvent() {
    $('.js-fresh-btn').click(handleRefreshClick);
  }

  function handleRefreshClick() {
    $.ajax({
      url: '/user/refresh-recom-problem',
      method: 'GET',
      success: (res) => {
        console.log(res);
        renderList(res);
      },
      error: (err) => {
        console.log(err);
      }
    });
   
  }

  function renderList(res) {
    let list = '';
    let tpl = returnTpl();
    res.problemList.forEach((item, index) => {
      //为了更清晰，模板替换格式两边加空格
      list += tpl.replace(/{{ (.*?) }}/g, (node, key) => {
        return {
          pid: item.pid,
          title: item.title,
          type: item.type,
          difficulty: item.difficulty,
          submit_times: item.submit_times,
          pass_rate: ( item.submit_times === 0 ? '50' : item.pass_times / item.submit_times * 100 ) + '%',
        }[key];
      })
    })
    
    $('.js-problem-container').html(list);

  }

  function returnTpl() {
    return  `
    <tr>
      <td class="problem-td">
        <a href="/problem-detail/{{ pid }}>" target="_blank" rel="noopener noreferrer">
          {{ pid }}
        </a>
      </td>
      <td class="problem-td">
        <a href="/problem-detail/{{ pid }}" target="_blank" rel="noopener noreferrer">
          {{ title }}
        </a>
      </td>
      <td class="problem-td">{{ type }}</td>
      <td class="problem-td">{{ difficulty }}</td>
      <td class="problem-td">{{ submit_times }}</td>
      <td class="problem-td">{{ pass_rate }}</td>
  </tr>
  `;

  }



  init();

})();